<template>
  <div class="loginContainer">
    <div class='info-wrap'>
      <div class='list-wrap'>
        <div class='item'>
          <div>姓名：</div>
          <div><input class='form-input'  type='text' v-model='userName' /></div>
        </div>
        <div class='item'>
          <div>手机号码：</div>
          <div><input class='form-input'  type='text' v-model='telephone'/></div>
        </div>
      </div>
    </div>
    <i-row i-class='submit-line'>
        <button type='button' @click='edit' class='submit-btn'>修改</button>
    </i-row>
    <i-toast id="toast" />
  </div>
</template>

<script type="text/javascript">
import { $Toast } from '@/../static/iview/base/index';
import { mapState } from 'vuex'
export default {
  data() {
    return {
      file: null
    }
  },
  methods:{
    edit(){
      this.$http.post({
        url:"/user/updateUser",
        data:{
          ukey:this.userInfo.ukey,
          userName:this.userName,
          telephone:this.telephone
        }
      }).then(res=>{
        if(res.s==0){
          $Toast({
              content: '摩派：修改成功'
          });
        }
      }).catch(err=>{
        $Toast({
            content: '摩派：修改失败'
        });
      })
    }
  },
  computed:{
    ...mapState(['userInfo']),
    userName:function(){
      return this.userInfo.userName;
    },
    telephone:function(){
      return this.userInfo.telephone;
    }
  }
}
</script>

<style lang='less'>
  page{
    height: 100%;
    background:#eef7fd;
  }
  .loginContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    .info-wrap{
      flex:1;
      height: 50rpx;
    }
    .list-wrap{
      margin: 20rpx;
      border:1px solid #eceeed;
      border-radius: 16rpx;
      background: #fff;
      .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #f2f4f3;
        padding:20rpx;
        font-size:32rpx;
        color:#83878a;
        &:last-child{
          border: none
        }
        input{
          color:#4d92c2;
          text-align: right;
        }
      }
    }
    .submit-line{
      margin:50rpx 0; 
      .submit-btn{
        width:70%;
        background: #1380d3;
        color:#fff!important;
        font-size:36rpx;
        border-radius:40rpx; 
        height: 80rpx;
        line-height: 80rpx;
      }
    }
  }
</style>

